<template>
	<view class=" ">
		<tn-navbar>车场信息 </tn-navbar>
		<view class="tn-m tn-p-sm">
			<tn-form ref="formRef" :model="formData" label-position="top">
				<tn-form-item label="车场名称" prop="parkingLotName">
					<tn-input v-model="formData.parkingLotName"></tn-input>
				</tn-form-item>
				<tn-form-item label="车场编号" prop="parkingLotNumber">
					<tn-input v-model="formData.parkingLotNumber" disabled></tn-input>
				</tn-form-item>
				<tn-form-item label="通讯码" prop="communicationCode">
					<view class="tn-flex">
						<tn-input v-model="formData.communicationCode" disabled></tn-input>
						<tn-button @click="copyCommunicationCode">复制</tn-button>
					</view>
				</tn-form-item>
				<tn-form-item label="负责人" prop="responsiblePerson">
					<tn-input v-model="formData.responsiblePerson"></tn-input>
				</tn-form-item>
				<tn-form-item label="管理处电话" prop="managementPhone">
					<tn-input v-model="formData.managementPhone"></tn-input>
				</tn-form-item>
				<tn-form-item label="系统类型" prop="systemType" required>
					<tn-input v-model="formData.systemType" disabled></tn-input>
				</tn-form-item>
				
				<tn-form-item label="总停车位" prop="totalParkingSpaces">
					<tn-input v-model="formData.totalParkingSpaces"></tn-input>
				</tn-form-item>
				<tn-form-item label="经度" prop="longitude">
					<tn-input v-model="formData.longitude" disabled></tn-input>
				</tn-form-item>
				<tn-form-item label="纬度" prop="latitude">
					<tn-input v-model="formData.latitude" disabled></tn-input>
				</tn-form-item>
				<tn-form-item label="省" prop="province">
					<tn-input v-model="formData.province" disabled></tn-input>
				</tn-form-item>
				<tn-form-item label="市" prop="city">
					<tn-input v-model="formData.city" disabled></tn-input>
				</tn-form-item>
				<tn-form-item label="区" prop="district">
					<tn-input v-model="formData.district" disabled></tn-input>
				</tn-form-item>
				<tn-form-item label="地址" prop="address">
					<tn-input v-model="formData.address"></tn-input>
				</tn-form-item>
				<tn-form-item label="备注" prop="remarks">
					<tn-input v-model="formData.remarks"></tn-input>
				</tn-form-item>
			</tn-form>
		
		</view>
		<!-- 选择器 -->
		<tn-picker v-model:open="openPickerVisible" :data="pickerData" @confirm="confirmPicker" @close="closePicker" />
		<!-- 悬浮按钮 -->
		<view  class="floating-button tn-flex justify-center tn-mb-xl" ><tn-button @click="confirmEdit" width="80%" size="xl" text-color="tn-white"
			bg-color="tn-gradient-bg__cool-8">确认</tn-button></view>
	<view class="tn-tabbar-height"></view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from "vue";
	import { BILLING_METHODS, CAR_TYPES, COMMON_YES_NO } from "@/utils/dict"; // 引入计费方式和车型字典
	import { onLoad } from "@dcloudio/uni-app";
 
	// 字典枚举映射
	const pickerDict = ref({
		dict: {
			billingMethod: BILLING_METHODS,
			carType: CAR_TYPES,
			noRenewal: COMMON_YES_NO
		},
		label: {}
	});

	// 选择器key
	const pickerKey = ref('');
	// 选择器数据
	const pickerData = ref([]);

	// 控制选择器的可见性
	const openPickerVisible = ref(false);

	// 打开选择器
	const openPicker = (type) => {
		pickerKey.value = type;
		pickerData.value = pickerDict.value.dict[type];
		openPickerVisible.value = true; // 显示选择器
	};

	// 关闭选择器
	const closePicker = () => {
		openPickerVisible.value = false; // 隐藏选择器
	};

	// 确认选择器的选择
	const confirmPicker = (value) => {
		formData.value[pickerKey.value] = value;
		closePicker(); // 关闭选择器
	};

	// 处理pickerDict.value 内的字典数据格式为 {billingMethod:{value:label}}
	const getDictLabel = () => {
		pickerDict.value.label = {};
		for (let key in pickerDict.value.dict) {
			let dict = pickerDict.value.dict[key];
			pickerDict.value.label[key] = dict.reduce((acc, cur) => {
				acc[cur.value] = cur.label;
				return acc;
			}, {});
		}
	};

	// 复制通讯码的函数
	const copyCommunicationCode = () => {
		navigator.clipboard.writeText(formData.value.communicationCode)
			.then(() => {
				console.log("通讯码已复制到剪贴板");
				// 可以在这里添加用户反馈，例如弹出提示
			})
			.catch(err => {
				console.error("复制失败:", err);
			});
	};

	// 表单数据模型
	const formData = ref({
		parkingLotName: null,
		parkingLotNumber: "", // 修改为车场编号
		communicationCode: "", // 修改为通讯码
		responsiblePerson: "", // 修改为负责人
		managementPhone: "", // 修改为管理处电话
		
		systemType: "", // 修改为系统类型
		totalParkingSpaces: "", // 修改为总停车位
		longitude: "", // 修改为经度
		latitude: "", // 修改为纬度
		province: "",
		city: "",
		district: "",
		address: "",
		remarks: "", // 修改为备注
	});

	const confirmEdit = () => {
		// TODO: 提交表单数据
		console.log(formData.value);
	};

	onLoad(() => {
		getDictLabel();
	});
</script>

<style lang="scss" scoped>
	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 180rpx;
		height: calc(180rpx + env(safe-area-inset-bottom) / 2);
		height: calc(180rpx + constant(safe-area-inset-bottom));
	}

	/* 悬浮按钮样式 */
	.floating-button {
		position: fixed;
		/* 固定定位 */
		bottom: 20rpx;
		/* 距离底部20rpx */
		left: 0;
		/* 左对齐 */
		right: 0;
		/* 右对齐 */
		margin: 0 auto;
		/* 居中 */
	}

</style>
